<template>
    <div>
        <h3>部门管理</h3>
        <table>
            <thead>
                <tr>
                    <th>部门ID</th>
                    <th>部门名称</th>
                    <th>部门负责人</th>
                    <th>操作</th>
                </tr>
           </thead>
           <tbody>
                <tr v-for="(item,index) in state.deptList" :key="item.id">
                    <td> {{ item.id }}</td>
                    <td> {{ item.name }}</td>
                    <td> {{ item.principal }}</td>
                    <td> <a href="" @click.prevent="goDetail(item.id)">详情</a></td>
                </tr>
           </tbody>
        </table>
    
    </div>
</template>


<!-- 组合式 -->
 <script setup>
 import { reactive,inject,onMounted } from 'vue';
 import { useRoute,useRouter } from 'vue-router';
 const router = useRouter()
 const route = useRoute()
//  $http 就是我们的axios对象
const $http = inject('$http')
//  state 是响应式的 ，我用后台数据赋值，并没有破坏state的响应式效果
const state= reactive({
    // 部门数据
    deptList: []
})
// 获取部门列表数据
const getDeptList = async () => {
    const result = await $http.get("/deps")
    state.deptList = result.data.data.rows
   
 }
 onMounted(()=> {
    getDeptList()
 })

 // 跳转到部门详情
const goDetail = (id) => {
    
    router.push(`/home/deptinfo/${id}`)
}


</script> 


<script>
// 选项式的用法
// export default {
//     inject: ['$http'],
//      data () {
//         return {
//             // 响应式数据
//             deptList : []
//         }
//      },
//      methods : {
//         async getDeptList() {
//            const result = await this.$http.get("/deps")
//         //    console.log(result.data.data.rows);
//            this.deptList = result.data.data.rows

//         }
//      },
//     //  挂载的生命周期函数
//      mounted () {
//         this.getDeptList()
//      }

// }
</script>

<style scoped>
</style>